import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import XEUtils from "xe-utils";
import "./public-path";
import { getRemoteSchemaList } from "@/utils/schema";
// 导入图标
import "@/assets/icons";
// 注册vant
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
/**
 * 注册element-ui
 */
import ElementUI from "element-ui";
import "@/assets/theme/global.scss";
Vue.use(ElementUI);

// 注册多语言
import { i18n, registerLanguage } from "./lang";

/**
 * 注册vxe-table
 */
import VXETable from "vxe-table";
import "vxe-table/lib/style.css";
import "@/assets/theme/vxeTable.scss";
VXETable.config({
  // 对组件内置的提示语进行国际化翻译
  i18n: (key, args) => i18n.t(key, args),
  // 可选，对参数中的列头、校验提示..等进行自动翻译（只对支持国际化的有效）
  translate(key, args) {
    if (key) {
      return i18n.t(key, args);
    }
    return key;
  },
});
// 格式时间
VXETable.formats.add("formatTime", {
  cellFormatMethod({ cellValue }, format = "yyyy-MM-dd hh:mm") {
    if (cellValue) {
      return XEUtils.toDateString(cellValue, format);
    } else {
      return "";
    }
  },
});
Vue.use(VXETable);

/**
 * 注册请求方法
 */
import http from "./utils/axios";
Vue.prototype.$http = http;
import erdfServer from "./utils/erdfServer";
Vue.use(erdfServer);
/**
 * 注册全局方法
 */
import util from "./utils/util";
Vue.prototype.$util = util;
Vue.config.productionTip = false;

/**
 * 注册组件
 */
import EvButton from "@/components/EvButton/index.vue";
Vue.component("EvButton", EvButton);
import EvTable from "@/components/EvTable/index.vue";
Vue.component("EvTable", EvTable);
import EvDrawer from "@/components/EvDrawer/index.vue";
Vue.component("EvDrawer", EvDrawer);
import EvDropTree from "@/components/EvDropTree/index.vue";
Vue.component("EvDropTree", EvDropTree);
import EvDropSelect from "@/components/EvDropSelect/index.vue";
Vue.component("EvDropSelect", EvDropSelect);
import EvForm from "@/components/EvForm/index.vue";
Vue.component("EvForm", EvForm);
import EvDialog from "@/components/EvDialog/index.vue";
Vue.component("EvDialog", EvDialog);
import EvGridForm from "@/components/EvGridForm/index.vue";
Vue.component("EvGridForm", EvGridForm);
import EvCard from "@/components/EvCard/index.vue";
Vue.component("EvCard", EvCard);
import ContentLayout from "@/layout/contentLayout.vue";
Vue.component("ContentLayout", ContentLayout);
import EvFormily from "@/components/EvFormily/index.vue";
Vue.component("EvFormily", EvFormily);

// 集成json-schema编辑器
import JsonSchemaEditor from "@/views/JsonSchemaEditor";
Vue.use(JsonSchemaEditor);

// 集成form-create 设计器和生成器
import FcDesigner from "@form-create/designer";
Vue.use(FcDesigner);
Vue.use(FcDesigner.formCreate);

// 注册自定义组件
import MyButton from "@/extends/MyButton/index.vue";
import EvTitle from "@/extends/Title/index.vue";
import MaterialScan from "@/extends/MaterialScan/index.vue";
import Formily from "@/extends/Formily/index.vue";
import FormilyMobile from "@/extends/FormilyMobile/index.vue";
import DeEvTable from "@/extends/DeEvTable/index.vue";
FcDesigner.component("MyButton", MyButton);
FcDesigner.component("EvTitle", EvTitle);
FcDesigner.component("MaterialScan", MaterialScan);
FcDesigner.component("Formily", Formily);
FcDesigner.component("FormilyMobile", FormilyMobile);
FcDesigner.component("DeEvTable", DeEvTable);

let instance = null;
async function render(props = {}) {
  const { container } = props;
  const schemaList = await getRemoteSchemaList();
  console.log(schemaList);

  store.commit("schema/UPDATE_SCHEMA", schemaList);
  await registerLanguage();
  instance = new Vue({
    i18n,
    router,
    store,
    render: (h) => h(App),
  }).$mount(container ? container.querySelector("#app") : "#app");
}

// 独立运行时
if (!window.__POWERED_BY_QIANKUN__) {
  render();
}
// qiankun生命周期
export async function bootstrap() {
  console.log("[vue] vue app bootstraped");
}
export async function mount(props) {
  console.log("[vue] props from main framework", props);
  // 挂载时判断主应用下发的状态值是否有变化
  if (props.globalState && props.globalState.lang !== i18n.locale) {
    i18n.locale = props.globalState.lang;
  }
  props.onGlobalStateChange(async (state) => {
    // 监听全局下发的数据的更改
    for (const key in state) {
      // 监听语言的更改
      if (key == "lang") {
        await registerLanguage(state.lang);
        i18n.locale = state.lang;
      }
    }
  });
  render(props);
}
export async function unmount() {
  instance.$destroy();
  instance.$el.innerHTML = "";
  instance = null;
}
